<template>
	<div class="design-list table-theme">
		<head-title title="用户--设计师列表"></head-title>
		<el-card>
			<div class="top-menu">
				<div class="menu-left">
					<select-view 
						:option-list="statusList" 
						:value="status" 
						placeholder="类型"
						type="status"
						@value="setSelectValue">
					</select-view>
				</div>
				<div class="menu-right">
					<refresh-button @refresh="refreshPage"></refresh-button>
					<search-view :option="searchOption" @value="goSearch" @clear="refreshPage" ></search-view>
					<div class="add"><el-button type="primary" @click="onOpenDialog('add')">添加设计师</el-button></div>
				</div>
			</div>
			<p class="data-number">总数据数：{{total}}</p>
			<el-table :data="list">
				<el-table-column label="序号" align="center" prop="store_stylist_id" width="80"></el-table-column>
				<el-table-column label="店铺名称" align="center" prop="store_name"></el-table-column>
				<el-table-column label="店铺ID" align="center" prop="store_id" width="80"></el-table-column>
				<el-table-column label="设计师名字" align="center" prop="name" width="100"></el-table-column>
				<el-table-column label="图片" align="center" width="80">
					<template slot-scope="scope">
						<ImgPopover :src="scope.row.image"></ImgPopover>
					</template>
				</el-table-column>
                <el-table-column label="擅长的风格" align="center" prop="style_name"></el-table-column>
                <el-table-column label="简介" align="center">
					<template slot-scope="scope">
						 <el-tooltip class="item" effect="dark" :content="scope.row.brief" placement="top">
							<p class="item-brief">{{scope.row.brief}}</p>
						</el-tooltip>
					</template>
				</el-table-column>
                <el-table-column label="标签" align="center" prop="code"></el-table-column>
				<el-table-column label="添加时间" align="center" prop="add_time"></el-table-column>
				<el-table-column label="上下架" align="center">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.status" :active-value="1" :inactive-value="2" @change="upDown($event, scope.row.store_stylist_id)"></el-switch>
					</template>
				</el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
						<el-button size="mini" type="primary" @click="onDetails('details',scope.row.store_stylist_id)">详情</el-button>
						<el-button size="mini" type="primary" @click="onDetails('edit',scope.row.store_stylist_id)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="onDel(scope.row.store_stylist_id)">删除</el-button>
                    </template>
                </el-table-column>
			</el-table>
			<div class="pages">
				<el-pagination 
				background 
				layout="prev, pager, next, jumper" 
				:total="total" 
				@current-change="init" 
				:current-page="page" 
				>
				</el-pagination>
			</div>
		</el-card>
	</div>
</template>

<script>
import ImgPopover from '@/components/ImgPopover';
import SelectView from '@/components/SelectView';
export default {
	components: {
		ImgPopover,
		SelectView
	},
	data() {
		return {
			list: [],
			total: 0,
			status: 1,
			statusList: [
				{
					value: 1,
					label: '上架'
				},
				{
					value: 2,
					label: '下架'
				}
			],
			page: 1,
            searchOption: [
                {
                value: 0,
                label: "序号",
                },
                {
                value: 1,
                label: "店铺ID",
                }
            ],
            classSelect:"",
            selectContent:"",
            store_id:""
		};
	},
	methods: {
		// 初始化列表
		init(e) {
			this.page = e;
			let data = {
				page: e - 1 ? e - 1 : 0,
				limit: 10,
				status: this.status
			};
            if(this.classSelect == 0){
                data.store_stylist_id = this.selectContent;
            }else if(this.classSelect == 1){
				data.store_id = this.selectContent;
            }
            if(this.store_id){
                data.store_id = this.store_id
            }
			this.$http(this.$ApiList.DesignList, data).then(res => {
				this.list = res.datas.list;
				this.total = res.datas.counts;
			});
		},
		// 上下架
		upDown(e, id) {
			let data = {
				store_stylist_id: id,
				status: e
			};
			this.$http(this.$ApiList.DesignDown, data).then(res => {
				this.$layer.msg('操作成功');
				this.init(this.page);
			});
		},
        goSearch(classSelect, selectContent) {
            this.classSelect = classSelect;
            this.selectContent = selectContent;
            this.init(1);
        },
		refreshPage() {
			this.page = 1;
			this.status = 1;
			this.selectContent = '';
            this.classSelect = 0;
			this.init();
		},
        // 删除
        onDel(store_stylist_id){
            this.$confirm('删除后不可恢复, 是否确认删除?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$http(this.$ApiList.DelDesign,{store_stylist_id}).then(res => {
					this.$message.success(res.datas);
                    this.init(this.page);
				})
			}).catch(() => {});
        },
		// 添加设计师
		onOpenDialog(){
			this.$router.push({path:"/add_design",query:{store_id:this.store_id}})
		},
		onDetails(type,store_stylist_id){
			this.$router.push({path:"/add_design",query:{store_stylist_id,type}});
		},
		setSelectValue(obj){
			const { type,value } = obj
			if(type === 'status'){
				this.status = value
			}
			this.init()
		}
	},
	created() {
		if(this.$route.query.store_id){
			this.store_id = this.$route.query.store_id;
			this.searchOption = [{
				value:0,
				label:"序号"
			}]
		}
		this.init();
	}
};
</script>
<style lang="scss">
.design-list {
	.item-brief{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.input-with-select .el-input-group__prepend {
		width: 100px;
		background-color: #fff;
	}
	.input-with-select .el-input__inner:nth-child(2) {
		width: 150px;
		padding-right: 15px;
	}
	/* 上传物流弹窗 */
	.image-up .el-form-item__content .el-button--danger {
		margin-top: 20px;
		width: 80px;
		background-color: #37c1d6;
		border-color: #37c1d6;
	}
	.image-up .el-upload--text,
	.image-up .avatar {
		width: 200px;
		height: auto;
	}
	.image-up .avatar-uploader-icon {
		line-height: 200px;
		height: 200px;
	}
}
</style>
